<div class="box"> 
  <div class="title">
    <h5><?php echo lang('text_heading_title_partner_list') ?></h5>
	<ul class="links">
		<li>
			<a href="http://localhost/pmts/index.php/referensi/referensi/partner">List Data</a>
		</li>
		<li>
			<a href="http://localhost/pmts/index.php/referensi/referensi/add_partner">Add Data</a>
		</li>
	</ul>
  </div>
  <table class="table table-condensed table-striped table-hover table-bordered pull-left" id="records">                        
  <thead>
  <tr>
    <th style="width:120px" nowrap>Partner ID</th>
    <th style="width:120px" nowrap>Partner Code</th>
    <th style="width:120px">Partner Name</th>
    <th style="width:120px">Address</th>
    <th style="width:120px">City</th>
    <th style="width:120px">Province ID</th>
    <th style="width:120px">Image Path</th>
    <th style="width:120px">Lon</th>
    <th style="width:120px">Lat</th>
    <th style="width:120px">Partner Type</th>
    <th style="width:120px">Status</th>
    <th style="width:120px">Partner ID Text</th>
    <th style="width:120px">GIS Marker</th>
    <th style="width:120px">Action</th>
  </tr>
  </thead>
  <tbody></tbody>
  </table>
</div>

<script type="text/template" id="tplPartner">
  <tr id="${partner_id}">
    <td>${partner_id}</td>
    <td>${partner_code}</td>
	<td>${partner_name}</td>
	<td>${address}</td>
	<td>${city}</td>
	<td>${province_id}</td>
	<td>${image_path}</td>
	<td>${lon}</td>
	<td>${lat}</td>
	<td>${partner_type}</td>
    <td>${status}</td>
	<td>${partner_id_text}</td>
	<td>${gis_marker}</td>
    <td width="110px"><a class="updateBtn" href="<?php echo site_url('referensi/referensi/edit_partner');?>/${partner_id}">Edit</a> | <a class="deleteBtn" href="<?php echo site_url('referensi/referensi/delete_partner');?>/${partner_id}">Delete</a></td>
  </tr>
</script>

<script>
$.ajax({
  url: '<?php echo site_url('/referensi/referensi/partner') ?>',
  data: { cmd: 'GET_PARTNER' },
  dataType: 'json',
  success: function( response ) {
    var j=1;
    for( var i in response ) {
      response[ i ].nomor = j;
      j++;
    }
    //clear old rows
    $( '#records > tbody' ).html( '' );
    
    //append new rows
    $('#tplPartner').render( response ).appendTo( "#records > tbody" );
    
    //apply dataTable to #records table and save its object in dataTable variable
    if( typeof dataTable == 'undefined' )
      dataTable = $( '#records' ).dataTable({"bJQueryUI": true});
    
    //hide ajax loader animation here...
    //$( '#ajaxLoadAni' ).fadeOut( 'slow' );
  }
});
</script>